<template>
    <div class="mainCenter">
        <div class="title">座位预约管理</div>
        <div class="mainCenterBox">
            <div class="searchBox">
                <el-form>
                    <el-form-item>
                        <el-input type="text" placeholder="预约编号/用户账号/座位编号" v-model="keyWord.str"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 120px;margin-left: 20px;">
                        <el-select placeholder="选择状态" v-model="keyWord.state">
                            <el-option :value="-1" :label="'全部'"></el-option>
                            <el-option :value="0" :label="'待入坐'"></el-option>
                            <el-option :value="1" :label="'正常'"></el-option>
                            <el-option :value="2" :label="'失效'"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="search"><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                    </el-form-item>
                </el-form>
                <div class="addInfo">
                    <el-button type="primary" @click="addwill"><el-icon>
                            <Plus />
                        </el-icon>手动预约</el-button>
                </div>
            </div>
            <el-table style="width: 100%" stripe border :data="willData.willList">
                <el-table-column label="预约编号" prop="willid" />
                <el-table-column prop="uid" label="预约账号" />
                <el-table-column prop="userList.nickname" label="用户昵称" />
                <el-table-column prop="seatList.seatid" label="座位编号" />
                <el-table-column prop="state" label="订单状态">
                    <template #default="scope">
                        <p v-if="scope.row.state==0" style="color: #409eff;">待入座</p>
                        <p v-if="scope.row.state==1" style="color:#4ee617;">正常</p>
                        <p v-if="scope.row.state==2" style="color: #f64358;">已失效</p>
                    </template>
                </el-table-column>
                <el-table-column  label="操作">
                    <template #default="scope">
                        <el-button type="danger" plain size="small" @click="deletewill(scope.$index,scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[5, 10]" :total="pagetions.count"
                style="float: right;margin-top: 20px;" v-model:page-size="pagetions.num" v-model:current-page="pagetions.page"
                @size-change="pagetions.changeLimit" @current-change="pagetions.jumpPage" />
        </div>
        
        <el-drawer v-model="willData.isChange" :title="'预约操作'" direction="btt" size="400">
               <Editwill :willOne="willData.willOne" @emit-add="addData"></Editwill>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import Editwill from './components/editWill.vue';
import { reqDeletewill, reqGetFloorList, reqGetSeatTypeList, reqGetWillList, reqSearchWillList} from '@/api/common';
import { elementConfirm, tip } from '@/utils/alert';
import { onMounted, reactive } from 'vue';
import { FloorType } from '@/types/floor';
import { WillType } from '@/types/will';
import { SeatType } from '@/types/seat';
const willData=reactive<{willList:WillType[],isChange:boolean,isSearch:boolean,willOne:WillType|null,index:number,floorList:FloorType[],typeSeatList:SeatType[]}>({
    willList:[],
    isChange:true,
    isSearch:false,
    willOne:null,
    index:-1,
    floorList:[],
    typeSeatList:[]
})
const keyWord=reactive({
    str:'',
    state:-1,
})
const pagetions=reactive({
    count:0,
    page:1,
    num:5,
    jumpPage(page:number){
        pagetions.page=page
        willData.isSearch?searchWillList():getWillList()
    },
    changeLimit(num:number){
        pagetions.num=num
       willData.isSearch?searchWillList():getWillList()
    }
})



const addData=(value:any)=>{
    willData.isChange=false
    getWillList()
}

const getWillList=async()=>{
    let res=await reqGetWillList(pagetions.num,pagetions.page)
    willData.willList=res.data.data.data
    pagetions.count=res.data.data.count
}

const search=()=>{
    pagetions.page=1
    willData.isSearch=true
    console.log(keyWord);
    searchWillList()
}

const searchWillList=async()=>{
    let res=await reqSearchWillList(keyWord.str,keyWord.state,pagetions.num,pagetions.page)
    willData.willList=res.data.data.data;
    pagetions.count=res.data.data.count
}

const addwill=()=>{
    willData.willOne=null,
    willData.isChange=true
}

const editwill=(idx:number,info:WillType)=>{
    willData.willOne=info
    willData.isChange=true
    willData.index=idx
}

const deletewill=(idx:number,info:WillType)=>{
    elementConfirm().then(()=>{
        reqDeletewill(info).then(res=>{
            tip(res.data.info,'success')
            getWillList()
        })
    })
}

const getFlooList=async()=>{
    let res=await reqGetFloorList()
    willData.floorList=res.data.data
}

const getTypeSeatList=async()=>{
    let res=await reqGetSeatTypeList(50,1)
    willData.typeSeatList=res.data.data.data
}

onMounted(()=>{
    willData.isChange=false
    getFlooList()
    getWillList()
    getTypeSeatList()
})

</script>

<style scoped lang="scss">
:deep(.el-drawer) {
    border-radius: 5px;
    width: 400px;
    position: absolute;
    left: 50%;
    margin-left: -200px;
    top: 50%;
    margin-top: -200px;
    display: flex;
    justify-content: center;

}

:deep(.el-drawer__header) {
    margin-bottom: 12px;
    ;
}
:deep(.el-drawer__body){
    display: flex;
    justify-content: center;
}
</style>